<template>
  <div class="index">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <!-- 任务行业查询 start -->
    <el-card>
      <div class="card-title">任务行业查询</div>
      <span class="trade-query-label">行业名称：</span>
      <el-input
        v-model="tradeListQueryForm.name"
        @change="inputChange()"
        class="trade-query-input"
      ></el-input>
      <el-button class="trade-query-button" @click="getTradeList()"
        >搜索</el-button
      >
    </el-card>
    <!-- 任务行业查询 end -->

    <!-- 任务行业列表 start -->
    <el-card style="margin-top: 20px;">
      <div class="card-title">任务行业列表</div>
      <div style="display: flex; justify-content: space-between">
        <!-- 左列表 -->
        <div :class="listData.length <= 6 ? 'stand-center list' : 'list'">
          <div class="list-header">
            <span
              style="width: 55%; border-right: 1px solid #d9d9d9; font-weight: 700; color: #1074fd"
              >行业名称</span
            >
            <span style="width: 45%; font-weight: 700; color: #1074fd"
              >操作</span
            >
          </div>
          <div v-if="listData.length > 0">
            <div
              class="list-body"
              v-for="item in listData.slice(0, 6)"
              :key="item.id"
            >
              <span
                style="width: 55%; border-right: 1px solid #d9d9d9; color: #4d4d4d; font-size: 14px"
                >{{ item.name }}</span
              >
              <span
                style="width: 45%; color: #1074fd; font-size: 14px"
                @click="modifyTradeNameBtnClick(item)"
                >修改</span
              >
            </div>
          </div>
          <div class="noneList" v-if="listData.length === 0">
            暂无数据
          </div>
        </div>
        <!-- 右列表 -->
        <div class="list" v-if="listData.length > 6">
          <div class="list-header">
            <span
              style="width: 55%; border-right: 1px solid #d9d9d9; font-weight: 700; color: #1074fd"
              >行业名称</span
            >
            <span style="width: 45%; font-weight: 700; color: #1074fd"
              >操作</span
            >
          </div>
          <div
            class="list-body"
            v-for="item in listData.slice(6)"
            :key="item.id"
          >
            <span
              style="width: 55%; border-right: 1px solid #d9d9d9; color: #4d4d4d; font-size: 14px"
              >{{ item.name }}</span
            >
            <span
              style="width: 45%; color: #1074fd; font-size: 14px"
              @click="modifyTradeNameBtnClick(item)"
              >修改</span
            >
          </div>
        </div>
      </div>
      <!-- 新增按钮 -->
      <div style="margin-top: 20px; text-align: right ">
        <el-button class="add-button" @click="addTradeDialog = true"
          >新增</el-button
        >
      </div>

      <!-- 分页 -->
      <div>
        <div style="text-align: center">
          <el-pagination
            :page-size="12"
            :pager-count="5"
            layout="total, prev, pager, next"
            :total="tradeTotal"
            @prev-click="paginationPrevClick"
            @next-click="paginationNextClick"
            @current-change="paginationNextChange"
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <!-- 任务行业列表 end -->

    <!-- 弹窗 -->
    <!-- 修改行业名称 start -->
    <el-dialog
      title="修改名称"
      width="30%"
      center
      :visible.sync="modifyTradeNameDialog"
    >
      <span style="margin-left: 17%">行业名称：</span>
      <el-input
        v-model="modifyTradeInfo.name"
        style="width: 50%; margin-top: 30px"
      ></el-input>
      <div style="text-align: right; margin-top: 70px">
        <el-button
          class="trade-query-button"
          style="width:100px"
          @click="modifyTradeName()"
          >确认修改</el-button
        >
      </div>
    </el-dialog>
    <!-- 修改行业名称 end -->

    <!-- 新增行业 start -->
    <el-dialog
      title="新增行业"
      width="30%"
      center
      :visible.sync="addTradeDialog"
    >
      <span style="margin-left: 17%">行业名称：</span>
      <el-input
        label="行业名称"
        v-model="addTradeForm.name"
        style="width: 50%; margin-top: 30px"
      ></el-input>
      <div style="text-align: right; margin-top: 70px">
        <el-button
          class="trade-query-button"
          style="width:100px"
          @click="addTrade()"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <!-- 新增行业 end -->
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle.vue";

import { createSign } from "@/utils/sign";
import API from "@/network/api/smsApi";
export default {
  name: "index",
  data() {
    return {
      moduleTitle: "行业管理",
      addTradeDialog: false, // 是否打开新增行业窗口
      modifyTradeNameDialog: false, // 是否展示修改框
      tradeTotal: 0, // 行业总数
      // 查询行业参数
      tradeListForm: {
        pageNum: 1,
        pageSize: 12
      },
      // 任务行业查询关键字
      tradeListQueryForm: {
        name: ""
      },
      // 行业新增参数
      addTradeForm: {
        name: ""
      },
      // 公共参数
      publicForm: {
        timestamp: 0
      },
      listData: [], // 行业数组
      modifyTradeInfo: {
        name: "",
        id: ""
      } // 当前修改的行业对象
    };
  },
  created() {
    this.getTradeList();
  },
  methods: {
    /**
     * 逻辑相关
     */

    // 初始化查询结果
    inputChange() {
      if (this.tradeListQueryForm.name === "") {
        this.getTradeList();
      }
    },

    // 修改行业名称
    modifyTradeNameBtnClick(item) {
      this.modifyTradeNameDialog = true;
      this.modifyTradeInfo.name = item.name;
      this.modifyTradeInfo.id = item.id;
    },

    // 分页
    paginationPrevClick(page) {
      this.tradeListForm.pageNum = page;
      this.getTradeList();
    },
    paginationNextClick(page) {
      this.tradeListForm.pageNum = page;
      this.getTradeList();
    },
    paginationNextChange(page) {
      this.tradeListForm.pageNum = page;
      this.getTradeList();
    },

    /**
     * 网络相关
     */

    // 查询行业列表
    async getTradeList() {
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          ...this.tradeListForm,
          ...this.tradeListQueryForm
        })
      );
      await API.getTradeQuery({
        ...this.publicForm,
        ...this.tradeListForm,
        ...this.tradeListQueryForm
      }).then(res => {
        if (res.data.code === 0) {
          this.listData = res.data.data.records;
          this.tradeTotal = res.data.data.total;
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
    },

    // 新增行业
    async addTrade() {
      if (this.addTradeForm.name === "") {
        this.$message.warning("请输入行业名称");
        return;
      } else {
        this.publicForm.timestamp = +new Date();
        if (this.publicForm.sign) {
          delete this.publicForm.sign;
        }
        this.publicForm.sign = createSign(
          JSON.stringify({
            ...this.publicForm,
            ...this.addTradeForm
          })
        );
        await API.getTradeAdd({
          ...this.publicForm,
          ...this.addTradeForm
        }).then(res => {
          if (res.data.code === 0) {
            this.$message.success("添加成功");
          } else {
            this.$message({
              type: "warning",
              message: res.data.msg.match(/[\u4e00-\u9fa5]/g).join("")
            });
          }
        });
        this.addTradeDialog = false;
        this.addTradeForm.name = "";
        this.getTradeList();
      }
    },

    // 修改行业名称
    async modifyTradeName() {
      this.publicForm.timestamp = +new Date();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({
          ...this.publicForm,
          ...this.modifyTradeInfo
        })
      );
      await API.getTradeUpd({
        ...this.publicForm,
        ...this.modifyTradeInfo
      }).then(res => {
        if (res.data.code === 0) {
          this.$message.success("修改成功");
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg
          });
        }
      });
      this.modifyTradeNameDialog = false;
      this.getTradeList();
    }
  },
  components: { ModuleTitle }
};
</script>

<style scoped>
.card-title {
  color: #1074fd;
  font-size: 18px;
  margin-bottom: 14px;
}

/* 任务行业查询 */
.trade-query-label {
  color: #1a1a1a;
  font-size: 18px;
}
.trade-query-input {
  width: 225px;
  height: 44px;
  margin-left: 10px;
  margin-right: 30px;
}
.trade-query-button {
  width: 64px;
  height: 40px;
  padding: 0;
  border-width: 0;
  background-color: #1074fd;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
}

/* 任务行业列表 */
.list {
  position: relative;
  width: 48%;
  height: 356px;
  border: 1px solid #d9d9d9;
}
.list-header {
  display: flex;
  height: 50px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
}
.list-body {
  display: flex;
  height: 51px;
  border-bottom: 1px solid #d9d9d9;
  text-align: center;
  line-height: 50px;
}
.add-button {
  background-color: #1074fd;
  color: #ffffff;
  border: 1px solid #1074fd;
}
.stand-center {
  width: 100% !important;
}
.noneList {
  position: relative;
  width: 100%;
  height: 356px;
  margin: 0 auto 40px;
  text-align: center;
  line-height: 356px;
  font-size: 30px;
}
</style>
